import React from 'react';
import { Menu, Icon } from 'antd';
import { Link } from 'react-router-dom'
import menuTree from '../utils/common'
const SubMenu = Menu.SubMenu;
const MenuList = ({menuListData}) =>{
        const menuList =  menuTree(menuListData);
        const height = document.body.clientHeight -50;
        return(
            <Menu style={{ width: 200,height:height }}
                  defaultSelectedKeys={['1']}
                  defaultOpenKeys={['sub1']}
                  mode="inline"
                  theme="dark"
            >
                {
                    menuList.map((item,index)=>{
                        if(item.children){
                            return(
                                <SubMenu key={item.id} title={<span><Icon type={item.icon} /><span>{item.title}</span></span>}>
                                    {
                                        item.children.map((childrenList,index)=>{
                                            return(
                                                <Menu.Item key={'menuChildren'+childrenList.id}>
                                                    <Link to={childrenList.route}>{childrenList.title}</Link>
                                                </Menu.Item>
                                            )
                                        })
                                    }
                                </SubMenu>
                            )
                        }else{
                            return(
                                <Menu.Item key={'menu'+item.id}>
                                    <Link to={item.route}>
                                        <Icon type={item.icon} />{item.title}
                                    </Link>
                                </Menu.Item>
                            )
                        }

                    })
                }
            </Menu>
        )
}
export default MenuList;
